<template>
	<div v-if="contentLoaded">
		<!-- banner部分 -->
		<div id="banner_container">
			<Swipe :auto="4000">
				<SwipeItem v-for="(img,i) in info1.banner_pic"
				:key="i">
					<img :src="img" alt="">
				</SwipeItem>
			</Swipe>	
		</div>
		<!-- 商品名称信息部分 -->
		<div id="info_container">
			<p class="ellipsis2 p30">{{info1.description}}</p>
			<p class="clear" style="margin-top:.05rem">
				<span class="fl colored p28">￥{{info1.price}}</span>
				<span class="fr grey p24">
					累计售出{{info1.sales_num}}件 库存:{{info1.stock}}件
				</span>
			</p>
			<div class="clear" style="margin-top:.1rem">
				<div class="fl">
					<Bonus :bonus="info1.bonus"></Bonus>
				</div>
				<div id="discount" class="p28 fr colored">
					{{info1.delivery_type == 1 ? '单件包邮' : '满三百包邮'}}
				</div>
			</div>
		</div>
		<!-- 两条评论部分 -->
		<div id="comment_container">
			<div id="comment_header">
				<span class="fl p28">宝贝评价（{{info1.comment_num}}）</span>
				<router-link class="fr p24"
				:to="`/goods/comment/${preGoodsId}`">
					好评率<span class="colored"> {{info1.feedback_rate}}%</span>
				</router-link>
			</div>
			<div class="comment-wrapper" v-for="comment in info2">
				<Comment :comment="comment" type="brief"></Comment>
			</div>		
			<div v-if="!info2.length" class="normal-tip"
			style="marginTop:.5rem">暂无评论</div>
		</div>
		<!-- 图片详情部分 -->
		<div class="margin-bottom: 1rem">
			<div class="divider">继续下拉，查看图文详情</div>
			<div v-html="goodsPic" id="goods_html_container">
			</div>
			<div class="divider">没有更多拉</div>
		</div>
		<!-- 底部footer -->
		<div id="goods_footer" class="clear">
			<span class="fl">
				<span class="collect" :class="{active: info1.is_collected == 1}"
				@click="toggleCollect"></span>
				收藏
			</span>
			<router-link to="/cart" class="fl">
				<span class="cart">
					<div class="red-point" v-show="cartNum">{{cartNum}}</div>
				</span>
				购物车
			</router-link>
			<span class="fl addCart" @click="maskShow = true">
				加入购物车
			</span>
		</div>
		<!-- 弹层 -->
		<transition name="fade">
			<div class="c-mask" v-show="maskShow">
				<div id="detail_container">
					<div id="detail_header">
						<div id="detail_close" @click="maskShow = false"></div>
						<img :src="goodsDetail.pic">
						<div class="vertical" style="verticalAlign: .2rem">
							<p>
								<span class="p30 colored"
								style="marginRight: .2rem">￥{{goodsDetail.price}}</span>
								<span class="p24 grey">(库存: {{goodsDetail.stock}}件)</span>
							</p>
							<Bonus :bonus="goodsDetail.bonus"
							style="marginTop: .1rem"></Bonus>
						</div>
					</div>
					<div id="detail_main">
						<GoodsAttr :preGoodsId="preGoodsId" v-model="goods"></GoodsAttr>
					</div>
					<div id="add" :class="{disabled: !goods.canAddCart}"
					@click="add">加入购物车</div>
				</div>
			</div>
		</transition>
	</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { Indicator, Swipe, SwipeItem } from 'mint-ui'
import Bonus from '@/components/Bonus'
import Comment from '@/components/Comment'
import GoodsAttr from '@/components/GoodsAttr'
export default{
	name: 'Detail',
	async created(){
		Indicator.open()
		this.preGoodsId = this.$route.params.preGoodsId;
		await this.getGoodsInfo(this.preGoodsId)
		await this.getCartNum()
		this.getGoodsAttrs(this.preGoodsId)
		this.contentLoaded = true
		Indicator.close()
	},
	data(){
		return{
			preGoodsId: 0,
			contentLoaded: false,
			maskShow: false,
			goods: {
				attrs:[],
				num: 0,
				canAddCart: false
			}
		}
	},
	computed:{
		...mapGetters({
			goodsInfo: 'goods/goodsInfo',
			goodsPic: 'goods/goodsPic',
			goodsDetail: 'goods/goodsDetail',
			cartNum: 'cart/cartNum'
		}),
		info1(){
			return this.goodsInfo.pre_goods_info
		},
		info2(){
			return this.goodsInfo.comment_info
		}
	},
	methods:{
		...mapActions({
			getGoodsInfo: 'goods/getGoodsInfo',
			getGoodsAttrs: 'goods/getGoodsAttrs',
			getCartNum: 'cart/getCartNum',
			addGoods: 'cart/addGoods',
			toTggleCollect: 'goods/toToggleCollect'
		}),
		async add(){
			if(!this.goods.canAddCart) return
			Indicator.open()
			await this.addGoods({
				goodsNum: this.goods.num
			})
			this.maskShow = false
			Indicator.close()
		},
		async toggleCollect(){
			Indicator.open()
			await this.toTggleCollect(this.preGoodsId)
			Indicator.close()
		}
	},
	 beforeDestroy(){
        this.$store.commit('goods/clearGoodsDetail')
    },
	components:{Swipe, SwipeItem, Bonus, Comment, GoodsAttr}
}
</script>
<style lang="less" scoped>
#banner_container{
	width: 100%;
	height: 7.4rem;
	img{
		width: 100%;
	}
}
#info_container{
	padding: .21rem .3rem;
	background: #fff;
	position: relative;
	#discount{
		border: 1px solid #fb4a4a;
		padding: 0 .1rem;
		border-radius: .1rem;
	}
}
#comment_container{
    background: #fff;
	margin-top: .26rem;
	padding-left: .3rem;
	min-height: 2.5rem;
	#comment_header{
		width: 100%;
		height: 1rem;
		line-height: 1rem;
		border-bottom: .03rem solid #ddd;
		padding-right: .6rem;
		background: url(../../assets/img/common/more.png) 9.2rem center no-repeat;
	}
	.comment-wrapper{
		border-bottom: .015rem solid #ddd;
		padding-right: .3rem;
	}
}
.detail-img{
	width: 100%;
}
#goods_html_container, #goods_html_container img{
    width: 100%;
}
// 底部
#goods_footer{
	background: #fff;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	>.fl{
		width: 33.3%;
		font-size: .35rem;
		height: 1.2rem;
		line-height: 1.2rem;
		text-align: center;
		border-right: 1px solid #858585;
		&.addCart{
			background: #fb4a4a;
			color: #fff;
		}
		span{
			display: inline-block;
			width: .6rem;
			height: .6rem;
			background-size: 100%;
			position: relative;
			vertical-align: middle;
			margin-right: .1rem;
			&.collect{
				background-image: url(../../assets/img/common/uncollect.png);
				&.active{
					background-image: url(../../assets/img/common/collect.png);
				}
			}
			&.cart{
				background-image: url(../../assets/img/common/cart.png);
				.red-point{
					right: -.12rem;
    				top: -.1rem;
				}
			}
		}
	}
}
// 弹层
#detail_container{
	background: #fff;
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	#detail_header{
		height: 1.86rem;
		position: relative;
		border-bottom: 1px solid #858585;
		>img{
		    width: 2.16rem;
			height: 2.16rem;
			margin: -0.5rem 0.4rem;
			display: inline-block;
			vertical-align: -.2rem;
		}
		#detail_close{
			position: absolute;
			top: .4rem;
			right: .4rem;
			width: .5rem;
			height: .5rem;
			background: url(../../assets/img/common/big-close.png);
		}
	}
	#detail_main{
		 padding: .3rem .3rem 0;
	}
	#add{
		margin-top: .4rem;
		width: 100%;
		height: 1.17rem;
		line-height: 1.17rem;
		border-radius: .08rem;
		text-align: center;
		font-size: .42rem;
		background: #fb4a4a;
    	color: #fff;
	}
}
</style>
